<template>
	<view class="content">
		<reservation v-if="current==0"></reservation>
		<exam v-if="current==1"></exam>
		<record v-if=" current==2"></record>
		<mine v-if="current==3"></mine>
		<!-- <u-tabbar v-model="current" :list="tabbarlist" active-color="#43D9CE"></u-tabbar> -->


		<view class="tabbar">

			<view class="tabbar-item" v-for="(item,index) in tabbarlist" :key="index" @click="change(index)">
				<view class="img">
					<image :src="item.iconPath" mode="" v-if="item.statrs==false"></image>
					<image :src="item.selectedIconPath" mode="" v-if="item.statrs==true"></image>
				</view>
				<view class="text" :style="{color:current==index?'#53DDA8':''}">
					<text>{{item.text}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import mine from "./mine.vue"
	import reservation from "./reservation.vue"
	import exam from "./exam.vue"
	import record from "./record.vue"
import index from "../uni_modules/uview-ui"
	export default {

		components: {
			mine,
			reservation,
			exam,
			record
		},
		data() {
			return {

				tabbarlist: [{
						iconPath: "/static/jl/yy.png",
						selectedIconPath: "/static/jl/yy1.png",
						statrs: true,
						text: '预约',
					}, {
						iconPath: "/static/jl/ks.png",
						selectedIconPath: "/static/jl/ks1.png",
						statrs: false,
						text: '考试',
					},
					{
						iconPath: "/static/jl/jl.png",
						selectedIconPath: "/static/jl/jl1.png",
						statrs: false,
						text: '记录',
					},
					{
						iconPath: "/static/jl/mine.png",
						selectedIconPath: "/static/jl/mine1.png",
						statrs: false,
						text: '我的',
					}
				],
				current: 1,

			}
		},
		
		mounted() {
		
		if (this.current === 0) {
			
			this.tabbarlist[0].statrs = true
			this.tabbarlist[1].statrs = false
			this.tabbarlist[2].statrs = false
			this.tabbarlist[3].statrs = false
		}
		if (this.current === 1) {
			this.tabbarlist[1].statrs = true
			this.tabbarlist[0].statrs = false
			this.tabbarlist[2].statrs = false
			this.tabbarlist[3].statrs = false
		}
		if (this.current === 2) {
			this.tabbarlist[2].statrs = true
			this.tabbarlist[0].statrs = false
			this.tabbarlist[1].statrs = false
			this.tabbarlist[3].statrs = false
		}
		if (this.current === 3) {
			this.tabbarlist[3].statrs = true
			this.tabbarlist[0].statrs = false
			this.tabbarlist[1].statrs = false
			this.tabbarlist[2].statrs = false
		}
		},
		methods: {
			change(index) {
				
				this.current = index
				if (index === 0) {
					// item[0].statrs=true
					this.tabbarlist[0].statrs = true
					this.tabbarlist[1].statrs = false
					this.tabbarlist[2].statrs = false
					this.tabbarlist[3].statrs = false
				}
				if (index === 1) {
					this.tabbarlist[1].statrs = true
					this.tabbarlist[0].statrs = false
					this.tabbarlist[2].statrs = false
					this.tabbarlist[3].statrs = false
				}
				if (index === 2) {
					this.tabbarlist[2].statrs = true
					this.tabbarlist[0].statrs = false
					this.tabbarlist[1].statrs = false
					this.tabbarlist[3].statrs = false
				}
				if (index === 3) {
					this.tabbarlist[3].statrs = true
					this.tabbarlist[0].statrs = false
					this.tabbarlist[1].statrs = false
					this.tabbarlist[2].statrs = false
				}
				// item.statrs = !item.statrs
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
	}

	.tabbar {
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		// background: #000000;
		padding-bottom: calc(env(safe-area-inset-bottom));
		/* 底部安全区域高度加 50px 的高度 */
	}

	.tabbar-item {
		width: 25%;


		.img {
			display: flex;
			justify-content: center;

			>image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.text {
			display: flex;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}

	}
</style>